<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>03-successRecordList</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
</head>
<body>
	<div class="container-fluid">
	  <br>
		<h3>成功记录</h3>
		<hr>
		<div class="">
      <table id="dg" style="width:100%;height:460px;"></table>
		</div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
      <table>
        <tr>
          <td><a href="javascript:void(0)" class="easyui-linkbutton detailSuccessInfoCls" data-options="iconCls:'icon-edit',plain:true" onclick="detailSuccessInfo()">详情</a></td>
          <td><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="destroySuccessInfo()">移除</a></td>
          <td>
				    <div class="searchHeader" style="margin-left:20px;">
				      <form class="form-inline">
				        <label class="my-1 mr-2" for="forCategoryToPage">物品类别</label>
				        <select class="custom-select my-1 mr-lg-5" id="forCategoryToPage">
				        </select>
				        <label class="my-1 mr-2" for="forWhatFlagToPage">记录类型</label>
				        <select class="custom-select my-1 mr-lg-5" id="forWhatFlagToPage">
				          <option value="all">全部</option>
				          <option value="0">寻找失主</option>
				          <option value="1">寻找失物</option>
				        </select>
				      </form>
				    </div>
          </td>
        </tr>
      </table>
    </div>
	</div><!-- container -->

  <!-- Modal : showSuccessRecord -->
  <div class="modal fade" id="showSuccessRecord" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="width:600px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详情</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
			    <form action="#" id="showSuccessRecordForm">
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forPhoto" class="col-sm-2 col-form-label text-center">照片</label>
			        <div class="col-sm-7">
			          <figure class="figure">
			            <img src="" class="figure-img img-fluid rounded mx-auto d-block" style="width:400px;height:200px;">
			          </figure>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowTitle" class="col-sm-2 col-form-label text-center">标题</label>
			        <div class="col-sm-7">
			          <input type="text" id="forShowTitle" class="form-control" readonly>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowCategory" class="col-sm-2 col-form-label text-center">失物类别</label>
			        <div class="col-sm-7">
			          <input type="text" id="forShowCategory" class="form-control" readonly>
			        </div>
			      </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowIssueTime" class="col-sm-2 col-form-label text-center">发布时间</label>
              <div class="col-sm-7">
                <input type="text" id="forShowIssueTime" class="form-control" readonly>
              </div>
            </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowTackTime" class="col-sm-2 col-form-label text-center">认领时间</label>
			        <div class="col-sm-7">
			          <input type="text" id="forShowTackTime" class="form-control" readonly>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowDetail" class="col-sm-2 col-form-label text-center">物品细节</label>
			        <div class="col-sm-7">
			          <textarea id="forShowDetail" class="form-control" rows="4" readonly></textarea>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowTakeDetail" class="col-sm-2 col-form-label text-center">认领情况</label>
			        <div class="col-sm-7">
			          <textarea id="forShowTakeDetail" class="form-control" rows="4" readonly></textarea>
			        </div>
			      </div>
			    </form>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/categoryAjax.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    $(function(){
    	$("#dg").datagrid({
    		url:"/LostAndFound/success?method=findAllSuccessRecordsForEasyUI",
    		queryParams:{
    			cid : $("#forCategoryToPage option:selected").val(),
    			whatFlag : $("#forWhatFlagToPage option:selected").val()
    		},
    		columns:[[
    			{field:'title',title:'标题',width:100},
    			{field:'cname',title:'物品类型',width:100},
    			{field:'whatflag',title:'记录类型',width:100},
    			{field:'issuetime',title:'发布时间',width:100},
    			{field:'foundtime',title:'认领时间',width:100},
    		]],
    		rownumbers:true,
    		pagination:true,
    		singleSelect:true,
    		method:"post",
    		fitColumns:true,
    		toolbar:"#toolbar",
    		striped:true
    	});
        // 根据条件显示记录
        $("#forCategoryToPage").on("change",function(){
          $("#dg").datagrid("load",{
            cid:$("#forCategoryToPage option:selected").val(),
            whatFlag:$("#forWhatFlagToPage option:selected").val()
          });
        });
        $("#forWhatFlagToPage").on("change",function(){
          $("#dg").datagrid("load",{
            cid:$("#forCategoryToPage option:selected").val(),
            whatFlag:$("#forWhatFlagToPage option:selected").val()
          });
        });
    });
    function detailSuccessInfo(){
    	var row = $('#dg').datagrid('getSelected');
    	if(row){
    		$(".detailSuccessInfoCls").attr('data-toggle','modal');
    		$(".detailSuccessInfoCls").attr('data-target','#showSuccessRecord');
    		$(".figure-img").attr("src","/LostAndFound/images"+row.image);
    		$("#forShowTitle").val(row.title);
    		$("#forShowCategory").val(row.cname);
    		$("#forShowIssueTime").val(row.issuetime);
    		$("#forShowTackTime").val(row.foundtime);
    		$("#forShowDetail").val(row.detailinfo);
    		$("#forShowTakeDetail").val(row.foundinfo);
    	}
    }
    function destroySuccessInfo(){
    	var row = $('#dg').datagrid('getSelected');
    	if(row){
        $.messager.confirm('Confirm','确定删除此申请？',function(r){
          if(r){
              $.post(
                      "/LostAndFound/success?method=handleDeleteSuccessRecordForEasyUI",
                      {
                        "aid":row.aid
                      },
                      function(data){
                        if(data.success){
                          $("#dg").datagrid("reload");
                        }else{
                          $.messager.show({
                            title:"Error",
                            msg:"删除失败！"
                          })
                        }
                      },
                      "json"
                    );        	  
          }   	  
        });
    	}
    }
  </script>
</body>
</html>